<template>
  <div class="">
    <div class="guide">
      <div class="guide-title flex-box">
        <h3>使用指南关闭指南</h3>
        <a href class="none close-guide">关闭指南</a>
      </div>
      <p class="guide-item">1、考勤组管理，即按部门或员工分组，并为每个组设置不同的考勤方式、出勤日、考勤规则等；</p>
      <p class="guide-item">2、支持设置多个考勤组，灵活组合员工的出勤方式，如双休、单休、大小周或排班等。</p>
      <p class="guide-item">3、不考勤方案，适用于企业中不需要考勤的人员，即不需要打卡或记录请假等，如企业高层。</p>
      <p class="guide-item">4、不打卡方案，适用于企业中不需要打卡，但需要记录请假等的人员，如长期外勤人员。</p>
      <p class="guide-item">5、若员工未加入任何考勤组，核算时，将按“企业默认考勤组”进行核算。</p>
    </div>

    <div class="header flex">
      <div class="selecte-section flex">
        <!-- <Input
          search
          enter-button
          placeholder="请输入考勤组名称"
          style="width: 200px"
          class="selecte-section-search"
        /> -->
      </div>
      <div class="right flex">
        <Button type="success" class="add-btn" @click="add">新增考勤组</Button>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <div class="tab-header-info flex">
        <div class="header-info-lefe flex">
          <!-- <ColorBar/> -->
        </div>
      </div>
      <!-- 表格 -->
      <div class="table-wrap">
        <Table width="100%" :columns="columns" :data="list" class="table4 mt12" :loading="tableLoading"></Table>
      </div>
    </div>
  </div>
</template>
<script>
import { attendance } from "@/apis";
import http from "@/utils/http";
export default {
  name: "list",
  data() {
    return {
      confirmModal: true,
      columns: [
        {
          title: "考勤组名称",
          key: "ag_name"
        },
        {
          title: "考勤组类型",
          key: "ag_type",
          render: (h, params) => {
            return h("div", [
              h("div", {}, params.row.ag_type),
              h("div", {}, params.row.time_type)
            ]);
          }
        },

        {
          title: "出勤日",
          key: "work_day"
        },
        {
          title: "出勤时间",
          key: "work_time"
        },
        {
          title: "核算规则",
          key: "city"
        },
        {
          title: "操作",
          key: "action",
          fixed: "right",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  props: {
                    type: "text",

                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      this.edit(params);
                    }
                  }
                },
                "修改"
              ),
              h(
                "span",
                {
                  props: {
                    type: "text",

                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      this.delete(params.row.ag_id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      list: [],
      tableLoading: false
    };
  },
  methods: {
    add() {
      this.$router.push("/attendance/work/schedule/group/add");
    },
    getList() {
      this.tableLoading = true;
      http.get(attendance.attendancegrouplist, {}).then(res => {
        let list = res.data.list.data;
        list.forEach(e => {
          let work_day_temp = [];
          let rest_day_temp = [];
          let work_time = "";
          if (e.ag_mon == "休息") {
            rest_day_temp.push("一");
          } else {
            work_time = e.ag_mon;
            work_day_temp.push("一");
          }
          if (e.ag_tue == "休息") {
            rest_day_temp.push("二");
          } else {
            work_day_temp.push("二");
          }
          if (e.ag_wed == "休息") {
            rest_day_temp.push("三");
          } else {
            work_day_temp.push("三");
          }
          if (e.ag_thu == "休息") {
            rest_day_temp.push("四");
          } else {
            work_day_temp.push("四");
          }
          if (e.ag_fri == "休息") {
            rest_day_temp.push("五");
          } else {
            work_day_temp.push("五");
          }
          if (e.ag_sat == "休息") {
            rest_day_temp.push("六");
          } else {
            work_day_temp.push("六");
          }
          if (e.ag_sun == "休息") {
            rest_day_temp.push("日");
          } else {
            work_day_temp.push("日");
          }

          e.work_day =
            "工作日：" +
            work_day_temp.join("、") +
            "；" +
            "休息日：" +
            rest_day_temp.join("、");
          e.work_time = work_time;
        });
        this.list = list;
        this.tableLoading = false;
      });
    },
    delete(id) {
      this.$Modal.confirm({
        title: "删除确认",
        content: "<p>确定要删除该考勤组吗？</p>",
        onOk: () => {
          http
            .get(attendance.attendancegroupdelete, { params: { ag_id: id } })
            .then(e => {
              if (e.e == "9999") {
                this.$Message.success("操作成功！");
                this.getList();
              }
            });
        },
        onCancel: () => {}
      });
    },
    edit(e) {
      let path = "/attendance/work/schedule/group/add?ag_id=" + e.row.ag_id;
      this.$router.push(path);
    }
  },
  mounted() {
    this.getList();
  }
};
</script>
<style lang="scss" scoped src="./index.scss"></style>